<template>
	<view class="page">
		<u-navbar :isBack="true" title="达人计划" title-color="#101010" 
		:background="{background: '#fff'}" :borderBottom="false"></u-navbar>
		
		<!-- <view style="display: flex;justify-content: center;padding: 40rpx;">
			<image :src="userPidData.shop_qrcode" mode="aspectFill"
			style="width: 320rpx;height: 320rpx;" show-menu-by-longpress="true" 
			@click="previewImage"></image>
		</view>
		<view style="text-align: center;">视频号：{{userPidData.shipinhao}}</view> -->
		<view style="padding: 32rpx 24rpx;">
			
			<view style="padding: 32rpx 24rpx;background: #fff;border-radius: 24rpx;margin-top: 24rpx;">
				
				<view>
					<view style="display: flex;align-items: center;">
						<view style="width: 40rpx;height: 40rpx;border-radius: 50%;line-height: 40rpx;background: #2979ff;text-align: center;color: #fff;">1</view>
						<view style="margin-left: 12rpx;">
							第一步：橱窗下单
						</view>
					</view>
					<view style="display: flex;">
						<view style="margin-left: 20rpx;">
							<u-line color="#2979ff" direction="col" :hair-line="false" length="320rpx" />
						</view>
						<view style="margin-left: 32rpx;padding-top: 40rpx;">
							<view class="switch-btn" @click="jumpTo">
								<view class="" style="margin-right: 12rpx;">
									进店下单
								</view>
								<u-icon name="arrow-right" color="#fff" size="24"></u-icon>
							</view>
							<view style="margin-top: 12rpx;color: #fa3534;">
								<view>注意</view>
								<view>1：进入橱窗仅需要购买一个商品</view>
								<view>2：下单后，请立即复制该订单编号，粘贴到下方。(该订单编号复制到其他任务窗口无效)</view>
							</view>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view style="width: 40rpx;height: 40rpx;border-radius: 50%;line-height: 40rpx;
						background: #2979ff;text-align: center;color: #fff;">2</view>
						<view style="margin-left: 12rpx;">
							第二步：填写订单号
						</view>
					</view>
					<view style="padding: 32rpx;">
						<view style="padding: 28rpx 24rpx;background: #F7F7F7;border-radius: 12rpx;">
							<view style="display: flex;align-items: center;">
								<view style="margin-left: 8rpx;width: 100%;">
									<input type="text" placeholder="请填写或粘贴订单编号" v-model="formData.order_no">
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view style="margin-top: 24rpx;color: #333A47;font-size: 28rpx;">
					上传凭证
				</view>
				<view style="margin-top: 16rpx;display: flex;flex-wrap: wrap;">
					<view class="img_add" style="display: inline-block;" @click="changeIdImage('voucher_image')">
						<image v-if="formData.voucher_image" :src="formData.voucher_image" mode="aspectFill" 
						style="width: 180rpx; height: 180rpx;"></image>
						<image v-else src="@/static/login/img_add.png" mode="aspectFill" 
						style="width: 180rpx; height: 180rpx;"></image>
					</view>
				</view> -->
			</view>
			<view style="color: #fa3534;font-size: 24rpx;margin-top: 10rpx;">请按照步骤如实填写上述相关信息</view>
			
			<view style="margin-top: 32rpx;padding: 24rpx;color: #fff;
			border-radius: 16rpx;text-align: center;background: #50A5F4;" @click="onSubmin">
				提 交 任 务
			</view>
		</view>
		
		<!-- <view style="position: fixed;bottom: 60rpx;width: 100%;">
			<image src="../../static/bottomimg.png" mode="widthFix" style="width: 100%;"></image>
		</view> -->
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import appurl_config from 'utils/config.js'
	import {request} from 'utils/request.js'
	import Vue from 'vue'
	var moment = require('moment');
	export default {
		data() {
			return {
				formData: {
					order_no: '',
					voucher_image: '',
				},
				tid: 0,
				
				userPidData: {},
				
				isAntiShake: false,
				
			}
		},
		onLoad(e) {
			// tid=3
			if(e.tid){
				this.tid = e.tid;
				// this.pidData();
			}
			uni.hideShareMenu();
		},
		methods: {
			jumpTo() {
				uni.navigateTo({
					url: '/pages/my/taskQrcode?tid=' + this.tid
				})
			},
			//长按识别二维码
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表。若无需预览，可以注释urls
					urls: [e.target.src],
					// 为当前显示图片的链接/索引值
					current: e.target.src,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					longPressActions: {
						itemList: [this.l('发送给朋友'), this.l]
					},
					success: res => {
						console.log('previewImage res', res);
					},
					fail: err => {
						console.log('previewImage err', err);
					}
				});
			},
			pidData(){
				request.getWithToken({
					url: '/user/userPidData',
					data: {id: this.tid}
				}).then(res=>{
					console.log('返回信息：', res);
					if(res.code == 1){
						this.userPidData = res.data;
					}
				})
			},
			// 上传身份证
			changeIdImage(etype) {
			    let that = this;
				let userToken = uni.getStorageSync('userToken');
			    uni.chooseImage({
			        count: 1,
			        sizeType: ['compressed'],
			        sourceType: ['album','camera'],
			        success: (chooseImageRes) => {
			            uni.uploadFile({
			                url: appurl_config.appurl + '/common/upload', //请求地址
			                filePath: chooseImageRes.tempFilePaths[0],
			                name: "file",
			                header: {
			                    // 设置请求的 header
			                    token: userToken,
			                },
			                success: (res) => {
								console.log('JSON.parse(res.data):', JSON.parse(res.data))
								that.formData[etype] = JSON.parse(res.data).data.fullurl;
								// that.profileUserInfo('avatar');
			                },
			                fail: (err) => {
			                    uni.showToast({
			                        title: err.msg,
			                        icon: 'none'
			                    })
			                    console.log('uploadFile_err: ', err);
			                },
			            });
			        }
			    });
			},
			onSubmin(){
				if(this.isAntiShake){
					return;
				}
				let params = {};
				params = this.formData;
				params.tid = this.tid;
				if(this.formData.order_no == ''){
					this.$refs.uToast.show({ title: '请填写订单号' })
					return;
				}
				this.isAntiShake = true;
				request.postWithToken({
					// url: '/task/voucherAdd',
					url: '/smallstore/storeCycle',
					data: params
				}).then(res=>{
					console.log('返回用户信息：', res);
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack();
							uni.$emit('refreshHtml', {
								type: 1
							});
						}, 300);
					}else{
						this.$refs.uToast.show({ title: res.msg })
						this.isAntiShake = false;
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F8FF !important;
	}
</style>
<style lang="scss" scoped>
	.top-box{
		background-size: 100% 100%;
	}
	
	.switch-btn{
		background: center center #4A54FF;
		background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
		background-size: 104% 104%;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		width: 280rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border-radius: 999px;
		box-shadow: 2rpx 2rpx 12rpx #ccc;
	}
</style>
